<template>
  <div class="dev">
    <section
      class="item"
      style="width: 70%; height: 100%;flex-direction: column;"
    >
      <div class="bar">
        <div class="right">
          <el-radio-group
            size="mini"
            @input="dateChange"
            v-model="timeData.dateOperation"
          >
            <el-radio-button label="year">年</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
          </el-radio-group>
          <el-date-picker
            :picker-options="pickerOptions"
            size="mini"
            v-model="timeData.date"
            :type="timeData.dateOperation == 'year' ? 'year' : 'month'"
            :clearable="false"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="dateChange"
          >
          </el-date-picker>
        </div>
        <div id="bar" ref="bar" style="width: 100%; height: 100%"></div>
      </div>
      <div
        ref="pie6"
        class="pie3"
        style="display: flex; justify-content: center; align-items: center;height: 49%;"
      >
        <div class="title" style="z-index: 999;">
          <el-radio-group size="mini" @input="dateChange2" v-model="type">
            <el-radio-button label="product">生产新增</el-radio-button>
            <el-radio-button label="bind">绑定新增</el-radio-button>
          </el-radio-group>
          ({{ rankTotal }})
        </div>
        <el-empty
          v-if="rankTitle.length == 0"
          description="暂无数据"
        ></el-empty>
        <div
          v-else
          id="pie2"
          ref="pie2"
          style="width: 100%; height: 100%"
        ></div>
        <div class="right">
          <el-radio-group size="mini" @input="dateChange2" v-model="subject">
            <el-radio-button label="tenant">厂商</el-radio-button>
            <el-radio-button label="product">生产</el-radio-button>
          </el-radio-group>
          <el-date-picker
            size="mini"
            @change="change"
            :clearable="false"
            v-model="time"
            type="daterange"
            align="center"
            range-separator="-"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
    </section>
    <section
      class="item"
      style="width: 28%; height: 100%;flex-direction: column;"
    >
      <div class="list" style="width: 100%;height: 49%;">
        <div class="title">系统数据（非实时）</div>
        <div ref="box" class="box">
          <div
            v-for="item in countData"
            :key="item.name"
            class="list_item"
            :style="{ backgroundColor: item.color }"
          >
            <span>{{
              item.name == "总收入"
                ? "总流水"
                : item.name == "年收入"
                ? "年流水"
                : item.name == "月收入"
                ? "月流水"
                : item.name
            }}</span>
            <span style="margin-top: 3%">{{ item.count }}</span>
          </div>
        </div>
      </div>
      <div class="pie" style="width: 100%;height: 49%;">
        <div ref="pie1" id="pie1"  style="width: 100%; height: 100%"></div>
      </div>
    </section>
  </div>
</template>

<script>
import {
  getCountApi,
  getHardwareApi,
  getDeviceApi,
  getIncomeApi,
  getRankApi
} from "../../../api/system/dashboard";
import MyWorker from '../../../worker/index';
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      time: [],
      meterType: [],
      meterStatus: [],
      hardWare: [],
      timeData: {
        date: "",
        dateOperation: "month"
      },
      xAxis: [],
      crash: [],
      zubi: [],
      weixin: [],
      aliPay: [],
      loading: null,
      operation: "month",
      subject: "tenant",
      rankTitle: [],
      rankValue: [],
      countData: [],
      allCount: [],
      onLineCount: [],
      rankTotal: 0,
      beginDate: "",
      endDate: "",
      fourG: [],
      blue: [],
      fourGB: [],
      blueB: [],
      fourGW: [],
      blueW: [],
      gong: [],
      caiji: [],
      allDevice: [],
      type: "product",
      increased: [],
      increased1: [],
      isFlag: false,
      worker: null// worker实例
    };
  },
  created() {
    // 后面如果要关闭 "username") == "admin" 只需要把下面这行代码注释了就可以
    this.isFlag = localStorage.getItem("username") == "admin";
    console.log("读取状态", this.isFlag);
    // 测试webworker
//     this.worker = new MyWorker();
//     this.worker.onmessage = (event) => {
//       console.log('从Worker接收到的消息:', event.data);
//     };
//     this.worker.onerror = function(error) {
//   console.error('Worker发生错误:', error);
// };
  },
  mounted() {
    // 获取当前日期
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    if (month < 10) {
      month = "0" + String(Number(month));
    }
    if (day < 10) {
      day = "0" + String(Number(day));
    }
    this.timeData.date = year + "-" + month + "-" + day;
    this.time = [this.timeData.date, this.timeData.date];
    this.beginDate = this.timeData.date;
    this.endDate = this.timeData.date;
    this.getCount(); // 右边系统数据
    this.getHardware(); // 左边硬件类型
    this.getRank(this.beginDate, this.endDate, this.subject, this.type); // 收入排行
    this.getDevice();//右下角数据获取
    this.getIncome(this.timeData.date, this.timeData.dateOperation);// 左边上
  },
  // beforeDestroy() {
  //   if (this.worker) {
  //     this.worker.terminate();
  //   }
  // },
  methods: {
    // sendMessageToWorker(message) {
    //   this.worker.postMessage(message);
    // },
    // 切换年月
    dateChange() {
      if (this.timeData.date.split("-")[1] < 10) {
        this.timeData.date =
          this.timeData.date.split("-")[0] +
          "-" +
          "0" +
          String(Number(this.timeData.date.split("-")[1])) +
          "-" +
          this.timeData.date.split("-")[2];
      }
      if (this.timeData.date.split("-")[2] < 10) {
        this.timeData.date =
          this.timeData.date.split("-")[0] +
          "-" +
          this.timeData.date.split("-")[1] +
          "-" +
          "0" +
          String(Number(this.timeData.date.split("-")[2]));
      }
      this.getIncome(this.timeData.date, this.timeData.dateOperation);
    },
    dateChange2() {
      this.getRank(this.beginDate, this.endDate, this.subject, this.type);
    },
    // 获取总数
    getCount() {
      this.loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        target: this.$refs.box
      });
      getCountApi().then(res => {
        console.log("    j接口获取总数", res);

        if (res.code == 200) {
          setTimeout(()=> {
            this.loading.close();
          },1000)
    
          if (res.data.length !== 0) {
            // 添加假数据判断
            if (this.isFlag) {
              this.countData = res.data.map(V => {
                V.count = V.count * 1 * 5;
                return V;
              });
              console.log("       this.countData", this.countData);
            } else {
              // 原来正常数据
              this.countData = res.data;
            }
          }
        }
      });
    },
    // 获取硬件类型
    getHardware() {
      getHardwareApi()
        .then(res => {
          if (res.code == 200) {
            console.log("获取硬件类型", res);

            this.hardWare = [];

            if (this.isFlag) {
              console.log("假数据", this.hardWare);
              
            res.data.forEach(item => {
              this.hardWare.push({
                value: item.count * 1 * 5,
                name: item.name
              });
            });
            } else {
              // 原来正常数据
              res.data.forEach(item => {
                this.hardWare.push({
                  value: item.count,
                  name: item.name
                });
              });
            }

            this.initPie3();
          }
        })
        .catch(() => {
          this.loading.close();
        });
    },
    // 获取设备统计
    getDevice() {
      const loading = this.$loading({
        target: this.$refs.pie1,
        lock: true,
        text: "加载中，请稍后",
        spinner: "el-icon-loading"
        // background: 'rgba(0, 0, 0, 0.7)'
      });
      getDeviceApi()
        .then(res => {
         
          if (res.code == 200) {
            console.log("获取设备统计", res);
            loading.close();
            this.meterType = [];
            this.meterStatus = [];
            // 展示假数据
            if (this.isFlag) {
              res.data.forEach(item => {
                this.meterType.push({
                  value: item.count * 1 * 5,
                  name: item.name
                });
              });
              res.data[0].detail.forEach(item => {
                this.meterStatus.push({
                  value: item.count * 1 * 5,
                  name: item.name
                });
              });
            } else {
              // 原来真实数据
              res.data.forEach(item => {
                this.meterType.push({
                  value: item.count,
                  name: item.name
                });
              });
              res.data[0].detail.forEach(item => {
                this.meterStatus.push({
                  value: item.count,
                  name: item.name
                });
              });
            }

            this.initPie1();
          }
        })
        .catch(() => {
         loading.close();
        });
    },
    // 获取收入
    getIncome(date, dateOperation) {
      const loading = this.$loading({
        target: this.$refs.bar,
        lock: true,
        text: "加载中，请稍后",
        spinner: "el-icon-loading"
        // background: 'rgba(0, 0, 0, 0.7)'
      });

      getIncomeApi(date, dateOperation)
        .then(res => {
          if (res.code == 200) {
            console.log('获取收入', res);
            
            setTimeout(() => {
              loading.close();
            }, 200);
            if (res.data.length !== 0) {
// 判断展示真假数据
if(this.isFlag) {
// 假数据
this.xAxis = res.data[0].keys.map(v=>v * 1 * 1);
              this.crash = res.data[0].values.map(v=>v * 1 * 5);
              this.zubi = res.data[1].values.map(v=>v * 1 * 5);
              this.weixin = res.data[2].values.map(v=>v * 1 * 5);
              this.aliPay = res.data[3].values.map(v=>v * 1 * 5);
              this.allCount = [];
              this.onLineCount = [];
}else {
// 真实数据
this.xAxis = res.data[0].keys.map(v=>v * 1);
              this.crash = res.data[0].values.map(v=>v * 1 );
              this.zubi = res.data[1].values.map(v=>v * 1 );
              this.weixin = res.data[2].values.map(v=>v * 1 );
              this.aliPay = res.data[3].values.map(v=>v * 1 );
              this.allCount = [];
              this.onLineCount = [];
}

   
              for (let index = 0; index < this.xAxis.length; index++) {
                this.allCount.push(
                  (
                    Number(this.crash[index]) +
                    Number(this.zubi[index]) +
                    Number(this.weixin[index]) +
                    Number(this.aliPay[index])
                  ).toFixed(2)
                );
                this.onLineCount.push(
                  (
                    Number(this.weixin[index]) + Number(this.aliPay[index])
                  ).toFixed(2)
                );
              }
              this.loading.close();
              this.initBar();
            }
          }
        })
        .catch(() => {
          this.loading.close();
        });
    },
    // 获取排名
    getRank(beginDate, endDate, subject, type) {
      let that = this;
      const loading = that.$loading({
        target: that.$refs.pie6,
        lock: true,
        text: "加载中，请稍后",
        spinner: "el-icon-loading"
        // background: 'rgba(0, 0, 0, 0.7)'
      });

      getRankApi(beginDate, endDate, subject, type).then(res => {
        if (res.code == 200) {
          setTimeout(() => {
            loading.close();
          }, 200);
          if (res.data.length != 0) {
            console.log("我是左下角数据", res);
            this.rankTitle = [];
            this.fourG = [];
            this.blue = [];
            this.fourGB = [];
            this.blueB = [];
            this.fourGW = [];
            this.blueW = [];
            this.gong = [];
            this.caiji = [];
            this.allDevice = [];
            this.rankTotal = 0;
            this.increased = [];
            this.increased1 = [];
            // 处理假数据展示
            if (this.isFlag) {
              res.data.forEach(item => {
                this.increased.push(0);
                this.increased1.push(item.increased * 1 * 5);
                this.rankTitle.push(item.name);
                this.fourG.push(item.values[0] * 1 * 5);
                this.blue.push(item.values[1] * 1 * 5);
                this.fourGB.push(item.values[2] * 1 * 5);
                this.blueB.push(item.values[3] * 1 * 5);
                this.fourGW.push(item.values[4] * 1 * 5);
                this.blueW.push(item.values[5] * 1 * 5);
                this.gong.push(item.values[6] * 1 * 5);
                this.caiji.push(item.values[7] * 1 * 5);
              });
            } else {
              // 原始真数据
              res.data.forEach(item => {
                this.increased.push(0);
                this.increased1.push(item.increased);
                this.rankTitle.push(item.name);
                this.fourG.push(item.values[0]);
                this.blue.push(item.values[1]);
                this.fourGB.push(item.values[2]);
                this.blueB.push(item.values[3]);
                this.fourGW.push(item.values[4]);
                this.blueW.push(item.values[5]);
                this.gong.push(item.values[6]);
                this.caiji.push(item.values[7]);
              });
            }

            for (let index = 0; index < this.rankTitle.length; index++) {
              this.allDevice.push(
                Number(this.fourG[index]) +
                  Number(this.blue[index]) +
                  Number(this.fourGB[index]) +
                  Number(this.blueB[index]) +
                  Number(this.fourGW[index]) +
                  Number(this.blueW[index]) +
                  Number(this.gong[index]) +
                  Number(this.caiji[index])
              );
            }
            for (let a = 0; a < this.allDevice.length; a++) {
              this.rankTotal += Number(this.allDevice[a]);
            }
            setTimeout(() => {
              that.initPie2();
            }, 20);
          } else {
            this.rankTotal = 0;
            this.rankTitle = [];
          }
        }
      });
    },
    change() {
      if (this.time.length != 0) {
        this.beginDate = this.time[0];
        this.endDate = this.time[1];
      } else {
        this.beginDate = "";
        this.endDate = "";
      }
      this.getRank(this.beginDate, this.endDate, this.subject, this.type);
    },
    // 收入
    initBar() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.bar);
      let option = {
        animation: true,
        animationDuration: 2000,
        title: {
          text: "流水详情"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ["#7ADF93", "#F89F92", "#69BEF6", "#FAB16C"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          left: "10%",
          top: "0%",
          selected: {
            总流水: false,
            现金: false,
            租币: false
            // 线上总流水: false,
          },
          formatter: e => {
            if (e != "线上总流水" && e != "总流水") {
              let num = 0;
              if (e == "微信") {
                that.weixin.forEach(item => {
                  num += Number(item);
                });
              } else if (e == "支付宝") {
                that.aliPay.forEach(item => {
                  num += Number(item);
                });
              } else if (e == "现金") {
                that.crash.forEach(item => {
                  num += Number(item);
                });
              } else if (e == "租币") {
                that.zubi.forEach(item => {
                  num += Number(item);
                });
              }
              return (
                "{a|" + e + "}{b|" + "\n" + "(" + num.toFixed(2) + ")" + "}"
              );
            } else {
              return e;
            }
          },
          textStyle: {
            rich: {
              b: {
                fontWeight: "bold"
              }
            }
          }
        },
        xAxis: {
          type: "category",
          data: this.xAxis
        },
        yAxis: [
          {
            type: "value"
          },
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "微信",
            type: "bar",
            stack: "total",
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.weixin
          },
          {
            name: "现金",
            type: "bar",
            stack: "total",
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.crash
          },
          {
            name: "支付宝",
            type: "bar",
            stack: "total",
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.aliPay
          },
          {
            name: "租币",
            type: "bar",
            stack: "total",
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.zubi
          },
          {
            //新的一个柱子 注意不设stack
            type: "line",
            name: "线上总流水",
            smooth: 0.6,
            label: {
              normal: {
                show: true, //显示数值
                position: "top", //  位置设为top
                formatter: "{c}",
                textStyle: { color: "#000" } //设置数值颜色
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(183, 75, 238)" // 设置背景颜色为透明
              }
            },
            data: this.onLineCount
          },
          {
            //新的一个柱子 注意不设stack
            type: "line",
            name: "总流水",
            smooth: 0.6,
            label: {
              normal: {
                show: true, //显示数值
                position: "top", //  位置设为top
                formatter: "{c}",
                textStyle: { color: "#000" } //设置数值颜色
              }
            },
            itemStyle: {
              normal: {
                color: "#2F3CF4" // 设置背景颜色为透明
              }
            },
            data: this.allCount
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //设备统计
    initPie1() {
      let myChart = this.$echarts.init(this.$refs.pie1);
      let option = {
        title: {
          text: "设备统计"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          data: ["4G", "蓝牙", "在线", "离线"],
          orient: "vertical",
          left: 0,
          top: 30
        },
        series: [
          {
            type: "pie",
            selectedMode: "single",
            radius: ["20%", "30%"],
            labelLine: {
              show: true
            },
            data: this.meterStatus,
            animationDuration: 2000,
            animationEasing: "cubicInOut"
          },
          {
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              show: true
            },
            data: this.meterType,
            animationDuration: 2000,
            animationEasing: "cubicInOut"
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 排名
    initPie2() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.pie2);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: params => {
            var res = "";
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName != "新增") {
                res += `<div>
                  ${params[i].seriesName}
                  ${params[i].data}
                </div>`;
              }
            }
            return res;
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          left: "2%",
          top: "7%",
          itemHeight: 7,
          data: [
            "4G电表",
            "蓝牙电表",
            "4G倍率表",
            "蓝牙倍率表",
            "4G水表",
            "蓝牙水表",
            "4G常规公摊电表",
            "4G采集器电表"
          ],
          formatter: e => {
            if (e != "新增" && e != "合计" && this.rankTitle.length != 0) {
              let num = 0;
              if (e == "4G电表") {
                that.fourG.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "蓝牙电表") {
                that.blue.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "4G倍率表") {
                that.fourGB.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "蓝牙倍率表") {
                that.blueB.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "4G水表") {
                that.fourGW.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "蓝牙水表") {
                that.blueW.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "4G常规公摊电表") {
                that.gong.forEach(item => {
                  num += item * 1;
                });
              } else if (e == "4G采集器电表") {
                that.caiji.forEach(item => {
                  num += item * 1;
                });
              }
              return "{a|" + e + "}{b|" + "(" + num + ")" + "}";
            } else {
              return "";
            }
          },
          textStyle: {
            rich: {
              //这里设置您的图片引用名称
              b: {
                fontWeight: "bold"
              }
            }
          }
        },
        xAxis: {
          type: "category",
          data: this.rankTitle,
          axisLabel: {
            //展示角度
            margin: 8,
            interval: 0, // 强制显示所有名称
            formatter: function(params) {
              var val = "";
              // 超过四个字隐藏
              if (params.length > 5) {
                val = params.substr(0, 5) + "...";
                return val;
              } else {
                return params;
              }
            }
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        series: [
          {
            name: "4G电表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.fourG
          },
          {
            name: "蓝牙电表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.blue
          },
          {
            name: "4G倍率表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.fourGB
          },
          {
            name: "蓝牙倍率表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.blueB
          },
          {
            name: "4G水表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.fourGW
          },
          {
            name: "蓝牙水表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.blueW
          },
          {
            name: "4G常规公摊电表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.gong
          },
          {
            name: "4G采集器电表",
            type: "bar",
            stack: "total",
            barMaxWidth: 40,
            label: {
              show: false
            },
            emphasis: {
              focus: "series"
            },
            data: this.caiji
          },
          {
            name: "新增",
            type: "bar",
            stack: "total",
            barGap: "-100%",
            label: {
              normal: {
                show: true,
                position: [50, -30],
                formatter: function(params) {
                  return that.increased1[params.dataIndex] != 0
                    ? `{a|}{b|${that.increased1[params.dataIndex]}}`
                    : "";
                },
                rich: {
                  //这里设置您的图片引用名称
                  a: {
                    height: 16,
                    backgroundColor: {
                      image:
                        "https://meter-resource.oss-cn-hangzhou.aliyuncs.com/miniprogamzzq/img/up.png"
                    }
                  },
                  b: {
                    padding: [0, 0, 0, 5]
                  }
                },
                textStyle: { color: "#000" }
              }
            },
            itemStyle: {
              normal: {
                color: "#000" // 仍为透明
              }
            },
            emphasis: {
              focus: "series"
            },
            data: this.increased
          },
          {
            //新的一个柱子 注意不设stack
            type: "line",
            name: "合计",
            smooth: 0.6,
            label: {
              normal: {
                show: true, //显示数值
                position: "top", //  位置设为top
                formatter: "{c}",
                textStyle: { color: "#000" } //设置数值颜色
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0)" // 设置背景颜色为透明#2F3CF4
              }
            },
            data: this.allDevice
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 硬件类型
    initPie3() {
      let myChart = this.$echarts.init(this.$refs.pie3);
      let option = {
        title: {
          text: "硬件类型"
        },
        legend: {
          orient: "vertical",
          left: 0,
          top: 30
        },
        tooltip: {
          trigger: "item"
        },

        series: [
          {
            name: "硬件类型",
            type: "pie",
            animationDuration: 2000,
            animationEasing: "cubicInOut",
            radius: ["15%", "80%"],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8
            },
            label: {
              fontSize: 14
            },
            data: this.hardWare
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dev {
  width: 100%;
  padding: 0px 15px;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .pie {
      width: 49%;
      height: 49%;
      background: #fff;
      padding: 1% 0;
      position: relative;

      .right {
        z-index: 999;
        position: absolute;
        right: 5%;
        top: 3%;
      }
    }

    .pie3 {
      height: 100%;
      width: 100%;
      background: #fff;
      padding: 1% 0;
      position: relative;

      .title {
        position: absolute;
        color: #464646;
        font-weight: bold;
        font-size: 18px;
        left: 8px;
        top: 8px;
      }

      .right {
        z-index: 999;
        position: absolute;
        right: 1%;
        top: 1%;
      }
    }

    .list {
      width: 49%;
      height: 49%;
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 1% 0;

      .title {
        color: #464646;
        font-weight: bold;
        font-size: 18px;
      }

      .box {
        width: 100%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        .list_item {
          cursor: pointer;
          width: 27%;
          height: 20%;
          border-radius: 30px;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-weight: bold;
        }
      }
    }

    .bar {
      width: 100%;
      height: 49%;
      background: #fff;
      padding: 1% 0;
      position: relative;

      .right {
        z-index: 999;
        position: absolute;
        right: 1%;
        top: 3%;
      }
    }
  }
}
</style>
